<template>
	<view class="loginPage">
		<view class="title">民营经济投诉服务中心</view>

		<!-- 一键登录 -->
		<button class="login">一键登录</button>
		<!-- 注册账号 -->
		<button class="register">注册账号</button>

		<!-- 协议 -->
		<view class="agreement">
			<label for="ra" @tap="checked = !checked">
				<radio id="ra" class="radio" :checked="checked" color="#2163E0" />登录即代表您同意
			</label>
			<view class="tips">《用户协议》</view>和
			<view class="tips">《隐私政策》</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import userStore from "@/stores/user"
	let { nickName, avatarUrl } = userStore()

	let checked = ref(true)
</script>

<style lang="scss" scoped>
	.loginPage {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333;
		min-height: inherit;

		// 背景图片
		background: transparent url("https://nntzback.jyhdkj.com/profile/upload/2022/11/18/bg_jianzhu_20221118100418A002.png") no-repeat scroll center bottom;
		background-size: contain;
	}

	.title {
		margin: 200rpx 0rpx 160rpx;
		font-size: 25px;
		font-weight: 800;
	}

	button {
		width: 418rpx;
		height: 88rpx;
		background-color: #2163E0;
		box-shadow: 0 2rpx 16rpx 0 rgba(0, 0, 0, 0.08);
		border-radius: 88rpx !important;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;

		&::after {
			content: none !important;
		}
	}

	// 协议
	.agreement {
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#ra {
		transform: scale(0.75);
	}

	.tips {
		color: #2163E0;
		margin: 0rpx 4rpx;
	}
</style>
